<template>
  <div>
    <a-form-model
      class="search-form"
      ref="formModel"
      :model="form"
      layout="inline"
    >
      <a-form-model-item
        prop="datacenterId"
        label="数据中心"
      >
        <a-select
          style="min-width: 120px;"
          v-model="form.datacenterId"
        >
          <a-select-option
            v-for="d in datacenterList"
            :key="d.id"
            :value="d.id"
          >
            {{ d.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item
        prop="year"
        label="年份"
      >
        <a-select
          style="min-width: 120px;"
          v-model="form.year"
        >
          <a-select-option
            v-for="d in yearMap"
            :key="d.value"
            :value="d.value"
          >
            {{ d.label }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item
        v-if="duration === 'quarterly'"
        prop="quarter"
        label="季度"
      >
        <a-select
          style="min-width: 120px;"
          v-model="form.quarter"
        >
          <a-select-option
            v-for="d in quarterMap"
            :key="d.value"
            :value="d.value"
          >
            {{ d.label }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item
        v-if="duration === 'monthly'"
        prop="month"
        label="月份"
      >
        <a-select
          style="min-width: 120px;"
          v-model="form.month"
        >
          <a-select-option
            v-for="d in 13"
            :key="d"
            :value="d - 1"
          >
            {{ d === 1 ? '全部' : d - 1 + '月'  }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <div style="line-height: 40px;">
        <a-button
          type="primary"
          @click="loadData(true)"
          icon="search"
          style="margin-left: 12px"
        >查询</a-button>
        <a-button
          @click="resetSearchForm"
          icon="reload"
          style="margin-left: 12px"
        >重置</a-button>
      </div>
    </a-form-model>

    <a-table
      ref="table"
      rowKey="id"
      size="middle"
      :columns="columns"
      :dataSource="gDataSource"
      :pagination="gPagination"
      @change="gHandleTableChange"
    >
      <span
        slot="sortCol"
        slot-scope="text, record, index"
      >
        {{
          (gPagination.current - 1) * gPagination.pageSize + parseInt(index) + 1
        }}
      </span>
      <span
        slot="floatCol"
        slot-scope="text"
      >
        {{
          text ? (parseFloat(text).toFixed(2) + 'W') : ''
        }}
      </span>
    </a-table>
  </div>
</template>

<script>
  import { GwListMixin } from "@/mixins/GwListMixin";
  import { gPostAction } from "@/api/manage";

  export default {
    name: "ConsumptionTable",
    mixins: [GwListMixin],
    props: {
      duration: {
        type: String,
        default: 'yearly'
      }
    },
    data() {
      return {
        durationMap: {
          yearly: {
            zh: '年份',
            key: 'year',
          },
          quarterly: {
            zh: '季度',
            key: 'quarter',
          },
          monthly: {
            zh: '月份',
            key: 'month',
          },
        },
        yearMap: [
          { label: '全部', value: '' },
          { label: '2021年', value: 2021 },
          { label: '2020年', value: 2020 },
          { label: '2019年', value: 2019 },
          { label: '2018年', value: 2018 },
        ],
        quarterMap: [
          { label: '全部', value: '' },
          { label: '第一季度', value: 1 },
          { label: '第二季度', value: 2 },
          { label: '第三季度', value: 3 },
          { label: '第四季度', value: 4 }
        ],
        // 表头
        columns: [],
        yearColumns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          scopedSlots: { customRender: "sortCol" },
        },
        {
          title: "数据中心",
          dataIndex: "datacenterName",
        },
        {
          title: "季度采集能耗最高值",
          dataIndex: "max",
          scopedSlots: { customRender: "floatCol" },
        },
        {
          title: "季度采集能耗平均值",
          dataIndex: "avg",
          scopedSlots: { customRender: "floatCol" },
        },
        {
          title: "季度采集能耗最低值",
          dataIndex: "min",
          scopedSlots: { customRender: "floatCol" },
        }, ],
        quarterColumns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          scopedSlots: { customRender: "sortCol" },
        },
        {
          title: "数据中心",
          dataIndex: "datacenterName",
        },
        {
          title: "月度采集能耗最高值",
          dataIndex: "max",
          scopedSlots: { customRender: "floatCol" },
        },
        {
          title: "月度采集能耗平均值",
          dataIndex: "avg",
          scopedSlots: { customRender: "floatCol" },
        },
        {
          title: "月度采集能耗最低值",
          dataIndex: "min",
          scopedSlots: { customRender: "floatCol" },
        }, ],
        monthColumns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          scopedSlots: { customRender: "sortCol" },
        },
        {
          title: "数据中心",
          dataIndex: "datacenterName",
        },
        {
          title: "日采集能耗最高值",
          dataIndex: "max",
          scopedSlots: { customRender: "floatCol" },
        },
        {
          title: "日采集能耗平均值",
          dataIndex: "avg",
          scopedSlots: { customRender: "floatCol" },
        },
        {
          title: "日采集能耗最低值",
          dataIndex: "min",
          scopedSlots: { customRender: "floatCol" },
        }, ],
        datacenterList: [],
        form: {
          datacenterId: '',
          year: '',
          quarter: '',
          month: 0,
        }
      };
    },
    mounted() {
      if (this.duration === 'yearly') {
        this.columns = this.yearColumns
        this.columns.splice(1, 0, {
          title: '年份',
          dataIndex: 'label',
        })
      } else if (this.duration === 'quarterly') {
        this.columns = this.quarterColumns
        this.columns.splice(1, 0, {
          title: '年份',
          dataIndex: '',
          customRender: function (t, r, index) {
            let arr = t.label.split("年");
            return arr[0] + "年";
          },
        },{
          title: '季度',
          dataIndex: '',
          customRender: function (t, r, index) {
            let arr = t.label.split("年");
            return arr[1];
          },
        })
      } else if (this.duration === 'monthly') {
        this.columns = this.monthColumns
        this.columns.splice(1, 0, {
          title: '年份',
          dataIndex: '',
          customRender: function (t, r, index) {
            let arr = t.label.split("年");
            return arr[0] + "年";
          },
        },{
          title: '月份',
          dataIndex: '',
          customRender: function (t, r, index) {
            let arr = t.label.split("年");
            return arr[1];
          },
        })
      }
      this.loadDatacenterList()
      this.loadData()
    },
    methods: {
      loadDatacenterList() {
        this.datacenterList = [{
          id: '',
          name: '全部'
        }]
        gPostAction('/asset/listDatacenter', {}).then((res) => {
          if (res.success) {
            this.datacenterList = this.datacenterList.concat(res.data)
          }
        })
      },
      loadData(isDoSearch) {
        this.$refs.formModel.validate(error => {
          if (!error) { return }
          let url = ''
          if (isDoSearch) {
            this.gQueryParam.pageNo = 1
            this.gPagination.current = 1
          }
          if (this.duration === 'yearly') {
            url = '/dcEnergy/reportByYear'
          } else if (this.duration === 'quarterly') {
            url = '/dcEnergy/reportByQuarter'
            this.gQueryParam.quarter = this.form.quarter
          } else if (this.duration === 'monthly') {
            url = '/dcEnergy/reportByMonth'
            this.gQueryParam.month = this.form.month === 0 ? '' : this.form.month
          }
          this.gQueryParam.year = this.form.year
          this.gQueryParam.datacenterId = this.form.datacenterId
          if (url === '') { return }
          gPostAction(url, this.gQueryParam).then((res) => {
            if (res.success) {
              this.gDataSource = res.data.list
              this.gPagination.total = res.data.totalCount
            }
          })
        })
      },
      resetSearchForm() {
        this.form.datacenterId = ""
        this.form.year = ""
        this.form.quarter = ""
        this.form.month = 0
        this.$refs.formModel.resetFields()
      },
    },
  };
</script>

<style scoped>
  .search-form {
    margin-bottom: 24px;
    display: flex;
    justify-content: flex-end;
  }
</style>